<template>
  <div>
    <el-card>
      <el-row type="flex">
        <el-col>
          <el-button size="small" type="primary" @click="addFn">添加房产</el-button>
        </el-col>
        <el-col>
          <el-row type="flex">
            <!-- 全部分类 -->
            <el-select v-model="searchOption.category">
              <el-option
                :value="''"
                :label="'全部分类'"
              />
              <el-option
                v-for="category in categoryList"
                :key="category.id"
                :value="category.id"
                :label="category.title"
              />
            </el-select>

            <!-- 全部经济 -->
            <el-select v-model="searchOption.agent">
              <el-option
                :value="''"
                :label="'全部经纪'"
              />
              <el-option
                v-for="agent in agents"
                :key="agent.id"
                :value="agent.id"
                :label="agent.name"
              />
            </el-select>
            <el-input v-model="searchOption.title" placeholder="请输入标题" />
            <el-button @click="search">
              筛选
            </el-button>
          </el-row>
        </el-col>
      </el-row>
      <el-divider />
      <el-table
        :data="properties"
        border
      >
        <el-table-column label="封面" width="200">
          <template #default="{row}">
            <img :src="row.image" alt="" style="width:200px;height:200px;object-fit:cover;">
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="title" width="100" />
        <el-table-column label="标签" prop="tag" width="150">
          <template #default="{row}">
            <el-tag v-for="tag in row.tags" :key="tag" type="success">{{ tag }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="地址" prop="address" width="100" />
        <el-table-column label="分类" prop="category.title" width="100" />
        <el-table-column label="经纪" prop="agent.name" width="120" />
        <el-table-column label="价格" prop="price" width="120" />
        <el-table-column label="介绍" prop="desc" />
        <el-table-column label="图片" width="180">
          <template #default="{row}">
            <el-row type="flex">
              <el-row v-for="(src, index) in row.photos" :key="index" :span="8">
                <img :src="src" alt="" style="width:48px;height:48px;object-fit:cover;">
              </el-row>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template #default="{row}">
            <el-button size="mini" type="primary" @click="updateProperty(row.id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="delProperty(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-divider />
      <el-row type="flex" justify="center">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :current-page="currentPage"
          :page-sizes="[1, 2, 3, 4]"
          :page-size="pagination._limit"
          @current-change="currentChange"
          @size-change="handleSizeChange"
        />
      </el-row>
    </el-card>
    <AddProperty ref="addProperty" :is-show-dialog="isShowDialog" :agents="agents" :category-list="categoryList" @update="update" />
  </div>
</template>

<script>
//
import { getCategory } from '@/api/category'
import AddProperty from './components/addProperty.vue'
import { getProperties, getPropertiesCount, getPropertyDetail, delProperty } from '@/api/property'
import { getAgents } from '@/api/agent'
import Axios from 'axios'
export default {
  components: { AddProperty },
  data() {
    return {
      currentPage: 1,
      value: '',
      areas: [],
      searchOption: {
        title: '',
        agent: '',
        category: ''
      },
      data: {
        category: '',
        title: '',
        desc: '',
        id: '',
        tag: '',
        address: '',
        price: '',
        content: '',
        agent: '',
        image: ''
      },
      properties: [],
      pagination: {
        _limit: 2,
        _start: 0,
        title_contains: '',
        agent_contains: '',
        category_contains: ''
      },
      agents: [],
      total: 0,
      isShowDialog: false,
      categoryList: []

    }
  },

  async created() {
    const result = await getCategory()
    this.categoryList = result.data

    this.getProperties()
    this.getAgents()
    const res = await Axios.get('https://restapi.amap.com/v3/config/district?key=60e00996dec1e73abda4333570328ef8&subdistrict=3')
    this.areas = res.data.districts[0].districts.map(area => {
      // console.log(area)
      return {
        value: area.name,
        label: area.name,
        children: area.districts.map(area => {
          return {
            value: area.name,
            label: area.name,
            children: area.districts.map(area => {
              return {
                value: area.name,
                label: area.name
              }
            })
          }
        })
      }
    })
  },
  methods: {
    async update() {
      // 子组件通知父组件更新
      console.log(235235)
      await this.getProperties()
    },
    // 点击页码分页内容更新
    currentChange(currentPage) {
      this.pagination._start = (currentPage - 1) * this.pagination._limit
      this.currentPage = currentPage
      this.getProperties()
    },

    // 分页条数函数
    handleSizeChange(pageSize) {
      this.pagination._limit = pageSize
      console.log('当前页', this.currentPage)
      console.log('当前条数', this.pagination._limit)
      this.pagination._start = (this.currentPage - 1) * this.pagination._limit
      this.getProperties({ _start: this.pagination._start })
      console.log('分页条数190', this.pagination._start)
    },

    // 删除
    async delProperty(id) {
      await this.$confirm('确认删除?')
      await delProperty(id)
      if (this.properties.length === 1 && this.currentPage > 1) {
        this.pagination._start -= this.pagination._limit
        console.log(1241234)
      }
      this.$message.success('删除成功')
      this.getProperties({
        _start: this.pagination._start
      })
    },
    // 编辑
    async updateProperty(id) {
      this.$refs.addProperty.data = { ...this.$refs.addProperty.data, id: id }
      this.$refs.addProperty.change = { cha: true }
      console.log(222)
      console.log(185, id)
      const res = await getPropertyDetail(id)
      console.log(res, 188)
      console.log(this.data, 190)
      this.data = {
        ...res,
        agent: res.agent?.id
      }
      console.log(this.data, 194)
      this.dynamicTags = this.data.tags ? [...this.data.tags] : []
      this.isShowDialog = true
      this.$nextTick(() => {
        if (this.data.image) {
          this.$refs.upload.fileList = [
            { url: this.data.image }
          ]
        }
        if (this.data.photos?.length > 0) {
          this.$refs.photos.fileList = this.data.photos.map(url => ({ url }))
        }
      })
    },
    // 添加房产弹框
    addFn() {
      this.isShowDialog = true
    },
    // 获取agent
    async getAgents() {
      const { data } = await getAgents({
        _limit: -1
      })
      this.agents = data
      console.log(199, this.agents)
    },

    // 获取数据
    async getProperties() {
      const { data } = await getProperties({
        ...this.pagination,
        title_contains: this.searchOption.title,
        category_contains: this.searchOption.category || null,
        agent_contains: this.searchOption.agent || null
      })
      this.properties = data
      this.getPropertiesCount()
      console.log(256, this.properties)
      console.log(229, this.pagination)
    },
    // 获取总数
    async getPropertiesCount() {
      const res = await getPropertiesCount({
        _limit: 2,
        _start: 0,
        title_contains: this.searchOption.title,
        category_contains: this.searchOption.category || null,
        agent_contains: this.searchOption.agent || null
      })
      this.total = res.data
      console.log(this.total, 256)
    },

    // 筛选点击
    search() {
      this.getProperties()
      this.getPropertiesCount()
    }

    // 关闭tag
    // handleClose(tag) {
    //   this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    //   // const res = this.dynamicTags.indexOf(tag)
    //   // console.log(286, res)
    // },

    // showInput() {
    //   this.inputVisible = true
    //   this.$nextTick(_ => {
    //     this.$refs.saveTagInput.$refs.input.focus()
    //   })
    // }

  }
}
</script>

<style lang="scss">
 .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
